<template>
  <div  style="background:#fff;height:100%">
      <div class="enterpriseInfoTab">
          <ul>
              <li class="defaultActive">
                  <a  @click="enterpriseInfoRouter('/dlyrl/hr/processmain/ProcessMainList')">
              员工流程设计
              </a>
              </li>
              <li>
                  <a @click="enterpriseInfoRouter('/dlyrl/hr/processlog/ProcessLogList')">
              流程审核记录
              </a>
              </li>
              <li>
                  <a @click="enterpriseInfoRouter('/dlyrl/hr/transferposition/TransferPositionList')">
              员工调岗记录
              </a>
              </li>
          </ul>
      </div>
      <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
            <!-- 搜索框-->
         <el-form-item prop="processName">
                <el-input size="small" v-model="searchForm.processName" placeholder="流程名称" clearable></el-input>
         </el-form-item>
         <el-form-item prop="processTime">
                <el-date-picker
                  v-model="searchForm.processTime"
                  type="datetime"
                  size="small" 
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择时间">
                </el-date-picker>
         </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
            <el-button @click="resetSearch()" size="small">重置</el-button>
          </el-form-item>
      </el-form>
        <!-- 导入导出-->
        <el-dialog  title="导入Excel" :visible.sync="isImportCollapse">
          <el-form :inline="true" v-show="isImportCollapse"  class="query-form" ref="importForm">
             <el-form-item>
              <el-button type="default" @click="downloadTpl()" size="small">下载模板</el-button>
             </el-form-item>
             <el-form-item prop="loginName">
                <el-upload
                  class="upload-demo"
                  :action="`${this.$http.BASE_URL}/dlyrl/hr/processmain/processMain/import`"
                  :on-success="uploadSuccess"
                   :show-file-list="true">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
                </el-upload>
            </el-form-item>
          </el-form>
      </el-dialog>
      <div class="bg-white top">
      <el-row>
        <el-button v-if="hasPermission('dlyrl:hr:processmain:processMain:add')" type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
        <el-button v-if="hasPermission('dlyrl:hr:processmain:processMain:edit')" type="warning" size="small" icon="el-icon-edit-outline" @click="edit()"
         :disabled="dataListSelections.length != 1" plain>修改</el-button>
        <el-button v-if="hasPermission('dlyrl:hr:processmain:processMain:del')" type="danger"   size="small" icon="el-icon-delete" @click="del()"
                  :disabled="dataListSelections.length <= 0" plain>删除
        </el-button>
        <el-button-group class="pull-right">
            <el-button v-if="hasPermission('dlyrl:hr:processmain:processMain:import')" type="default" size="small" icon="el-icon-upload2" title="导入" @click="isImportCollapse = !isImportCollapse, isSearchCollapse=false"></el-button>
            <el-button v-if="hasPermission('dlyrl:hr:processmain:processMain:export')" type="default" size="small" icon="el-icon-download" title="导出" @click="exportExcel()"></el-button>
            <el-button
              type="default"
              size="small"
              icon="el-icon-refresh"
              @click="refreshList">
            </el-button>
        </el-button-group>
      </el-row>
    <el-table
      :data="dataList"
      :cell-style="cellStyle" style="border:1px solid #d6cfe2;"
      :header-cell-class-name="cellHeadStyle" 
      :row-class-name="tableRowClassName"
      @selection-change="selectionChangeHandle"
      @sort-change="sortChangeHandle"
      v-loading="loading"
      size="small"
      @expand-change="detail"
      class="table">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column type="expand">
      <template slot-scope="scope">
      <el-tabs>
            <el-tab-pane label="流程附表">
                  <el-table
                  size="small"
                  :cell-style="cellStyle" style="border:1px solid #d6cfe2;"
                  :header-cell-class-name="cellHeadStyle" 
                  :row-class-name="tableRowClassName"
                  :data="scope.row.processAttachList">
                  <el-table-column
                    prop="processName.processName"
                    label="流程">
                  </el-table-column>
                <el-table-column
                    prop="number"
                    show-overflow-tooltip
                    label="序号">
                  </el-table-column>
                  <el-table-column
                    prop="attachRole.roleName"
                    label="审批角色">
                  </el-table-column>
                <el-table-column
                    prop="attachType"
                    label="审批类型">
                    <template slot-scope="scope">
                        {{ $dictUtils.getDictLabel("attachtype", scope.row.attachType, '-') }}
                    </template>
                  </el-table-column>
                <el-table-column
                    prop="parallelNumber"
                    show-overflow-tooltip
                    label="并行序号">
                  </el-table-column>
                <el-table-column
                    prop="failNumber"
                    show-overflow-tooltip
                    label="失败返回序号">
                  </el-table-column>
                <el-table-column
                    prop="remarks"
                    show-overflow-tooltip
                    label="备注信息">
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
      </template>
      </el-table-column>
    <el-table-column
        prop="processName"
        show-overflow-tooltip 
        label="流程名称">
            <!-- <template slot-scope="scope">
              <el-link  type="primary" :underline="false" v-if="hasPermission('dlyrl:hr:processmain:processMain:edit')" @click="edit(scope.row.id)">{{scope.row.processName}}</el-link>
              <el-link  type="primary" :underline="false" v-else-if="hasPermission('dlyrl:hr:processmain:processMain:view')"  @click="view(scope.row.id)">{{scope.row.processName}}</el-link>
              <span v-else>{{scope.row.processName}}</span>
            </template> -->
            <template slot-scope="scope">   
              <el-link  type="primary" :underline="false"   @click="view(scope.row.id)">{{scope.row.processName}}</el-link>            
            </template>
      </el-table-column>
      <el-table-column
        prop="enterpriseUser.userName"
        show-overflow-tooltip 
        label="创建人">
      </el-table-column>
      <el-table-column
        prop="companyName.companyName"
        show-overflow-tooltip 
        label="公司名称">
      </el-table-column>
    <el-table-column
        prop="processTime"
        show-overflow-tooltip 
        label="时间">
      </el-table-column>
    <el-table-column
        prop="processMaintype"
        show-overflow-tooltip 
        label="流程类型">
        <template slot-scope="scope">
              {{ $dictUtils.getDictLabel("process_mtype", scope.row.processMaintype, '-') }}
        </template>
      </el-table-column>
    <el-table-column
        prop="remarks"
        show-overflow-tooltip 
        label="备注信息">
      </el-table-column>
      <!-- <el-table-column
        header-align="center"
        align="center"
        fixed="right"
        :key="Math.random()"
        width="200"
        label="操作">
        <template  slot-scope="scope">
          <el-button v-if="hasPermission('dlyrl:hr:processmain:processMain:view')" type="text" icon="el-icon-view" size="mini" @click="view(scope.row.id)">查看</el-button>
          <el-button v-if="hasPermission('dlyrl:hr:processmain:processMain:edit')" type="text" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">修改</el-button>
          <el-button v-if="hasPermission('dlyrl:hr:processmain:processMain:del')" type="text"  icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
      background
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>
        <!-- 弹窗, 新增 / 修改 -->
    <ProcessMainForm  ref="processMainForm" @refreshDataList="refreshList"></ProcessMainForm>
  </div>
</template>

<script>
import tableStyles from "../../../../../utils/mixins.js";
import ProcessMainForm from "./ProcessMainForm";
export default {
  mixins: [tableStyles],
  data() {
    return {
      searchForm: {
        processName: "",
        processTime: "",
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      dataListSelections: [],
      isImportCollapse: false,
      loading: false,
    };
  },
  components: {
    ProcessMainForm,
  },
  activated() {
    this.refreshList();
  },
  methods: {
    //跳转
    enterpriseInfoRouter(url) {
      this.$router.push(url);
    },
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/processmain/processMain/list",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          orderBy: this.orderBy,
          ...this.searchForm,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    // 排序
    sortChangeHandle(obj) {
      if (obj.order === "ascending") {
        this.orderBy = obj.prop + " asc";
      } else if (obj.order === "descending") {
        this.orderBy = obj.prop + " desc";
      } else {
        this.orderBy = "";
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.processMainForm.init("add", "");
    },
    // 修改
    edit(id) {
      id =
        id ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      this.$refs.processMainForm.init("edit", id);
    },
    // 查看
    view(id) {
      this.$refs.processMainForm.init("view", id);
    },
    // 删除
    del(id) {
      let ids =
        id ||
        this.dataListSelections
          .map((item) => {
            return item.id;
          })
          .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/hr/processmain/processMain/delete",
          method: "delete",
          params: { ids: ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
    // 查看详情
    detail(row) {
      this.$http
        .get(`/dlyrl/hr/processmain/processMain/queryById?id=${row.id}`)
        .then(({ data }) => {
          this.dataList.forEach((item, index) => {
            if (item.id === row.id) {
              item.processAttachList = data.processMain.processAttachList
            }
          });
        });
    },
    // 导入成功
    uploadSuccess(res, file) {
      if (res.success) {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: res.msg,
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    // 下载模板
    downloadTpl() {
      this.$utils.download("/dlyrl/hr/processmain/processMain/import/template");
    },
    exportExcel() {
      let params = {
        ...this.searchForm,
      };
      this.$utils.download("/dlyrl/hr/processmain/processMain/export", params);
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>
<style scoped>
ul {
  margin: 0;
}
</style>